<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>插槽</title>
</head>
<body>
<div id="app">
  <!-- 这里放的内容均属于父级模板的，只有属性名是属于组件的 -->
  <modal m="1">
      <a href="www.baidu.com" >去百度</a>
      <p slot="content" @click="fn">亲确认删除吗？</p>
      <h1 slot="title">是否删除？</h1>
      <a href="www.baidu.com">去百度</a>
  </modal>

  <modal><span>是否确认？</span></modal>

  <modal></modal>
</div>

<!-- 模板中只能有一个根元素，可以通过元素或者属性定制模板 -->
<!-- slot 中可以放置一些默认的内容，如果传递了内容则替换掉-->
<template id="modal">
  <div>
    <slot name="title">默认标题</slot>
    <slot name="content">默认内容</slot>
    <slot name="default">这是一个默认标题</slot>
    <p @click="fn2">p2</p>
  </div>
</template>

</body>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
  let modal = {
    template: `#modal`,
    methods: {
      fn2(){
        alert(2)
      }
    }
  };

  let vm = new Vue({
    el: '#app',
    data: {
      msg: 'hello world!'
    },
    components: {
      modal
    },
    methods:{
      fn(){
        alert(1);
      }
    }
  })

  console.log(vm);
</script>
</html>
